<template>
	<view>
		<view class="bg padding">
			<view class="bigMarginTop"></view>
			<view><text class="bigText bigMarginTop">欢迎</text></view>
			<input v-if="type==1" v-model="name" class="underline-input marginTop3" focus placeholder="输入用户名" />
			<input v-else v-model="name" class="underline-input marginTop3" focus placeholder="输入手机号" />

			<view v-if="type==1" class="line marginTop">
				<input type="password" v-model="password" class="underline-input bigEmpty " focus placeholder="输入密码" />
			</view>
			<view v-else class="line marginTop">
				<input v-model="code" class="underline-input bigEmpty" focus placeholder="输入验证码" />
				<view class="marginLeft">
					<view v-if="percent!=0" class="line marginTop">（{{percent}} 秒后可重新获取验证码）</view>
					<view class="line textblue14 marginTop" v-if="percent==0" @click="click"> 发送</view>
				</view>
			</view>
			<view class="line">
				<view class="bigEmpty"></view>
				<text class="marginTop" @click="forget">忘记密码</text>
			</view>
			<view style="margin-top: 200rpx;">
				<view class="line  column">

					<image @click="changeType(2)" v-if="type==1" style="height: 120rpx; width: 120rpx;"
						src="../../static/login_phone.png"></image>

					<image @click="changeType(1)" v-else style="height: 120rpx; width: 120rpx;"
						src="../../static/login_user.png"></image>

					<view @click="changeType(2)" v-if="type==1" class="textgray14 marginTop">手机登录</view>
					<view @click="changeType(1)" v-else class="textgray14 marginTop">账号登录</view>
				</view>
			</view>

			<view class="line textblack14 marginTop">
				<checkbox-group @change="change">
					<checkbox :checked="cb" />
				</checkbox-group>
				我已阅读和同意
				<view class="textblue14" @click="agreement"> 用户协议</view>
				和 <view class="textblue14" @click="private">隐私条款
				</view>
				<view class="bigEmpty" />
			</view>


			<button type="primary" v-show="name&&password" class="marginTop" @click="login">登录</button>
			<button v-show="!(name&&password)" class="marginTop" @click="login">登录</button>

			<view class="register " @click="register">
				<view class="line">
					<view class="textblack14">还没有账号?</view>
					<view class="textblue14">去注册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openUrl: "",
				cb: false,
				name: "",
				timer: null,
				percent: 0,
				password: "",
				code: "",
				type: 1,
				btnType: "primary"
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onUnload() {
			uni.switchTab({
				url: "/pages/HomePage/HomePage"
			})
		},
		onLoad: function(query) {
			this.openUrl = query.openUrl

		},


		methods: {

			resend: function() {
				const that = this;

				const url = getApp().globalData.apiUrl + "/api/v1/messagecode";

				uni.request({
					url: url,
					data: {
						phone: this.name
					},
					method: 'POST',
					success: (res) => {

						console.log(res)
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'error',
								title: "发送成功"
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.message
							})
						}

					}
				});

			},
			click() {
				const that = this;
				if(this.name==''){
					uni.showToast({
						title:'请填写正确的手机号',
						icon:'none'
					})
					return false;
				}
				that.percent = 60;
				that.timer = setInterval(function() {
					console.log(that.percent)
					that.percent--;
					if (that.percent < 0) {
						that.percent = 0;
						if (that.timer != undefined) {
							clearInterval(that.timer)
							that.timer = null;
						}
					}
				}, 1000);
				this.resend()
			},

			changeType(type) {
				this.type = type;
			},
			change(e) {
				if (e.detail.value.length > 0)
					this.cb = true
				else
					this.cb = false
			},

			forget: function() {
				uni.navigateTo({
					url: "/pages/Login/Forget"
				})
			},
			agreement: function() {
				uni.navigateTo({
					url: "/pages/Login/Agreement"
				})
			},
			private: function() {
				uni.navigateTo({
					url: "/pages/Login/Private"
				})
			},
			register: function() {
				uni.navigateTo({
					url: "/pages/Login/BindPhone"
				})
			},
			login: function() {
				const that = this;
				if (!this.cb) {
					uni.showModal({
						title: "请同意用户协议",
						success: function() {
							that.cb = true
						}
					})
					return
				}
				if (this.type == 1) {
					const url = getApp().globalData.apiUrl + "/api/v1/user/login";
					uni.request({
						url: url,
						data: {
							password: this.password,
							name: this.name
						},
						method: 'POST',
						success: (res) => {
							if (res.data.code == 0) {
								uni.setStorageSync("token", res.data.data.token)
								uni.setStorageSync("name", res.data.data.name)
								uni.setStorageSync("avator", res.data.data.avator)
								uni.setStorageSync("level", res.data.data.level)
								uni.setStorageSync("vipName", res.data.data.vipName)
								uni.setStorageSync("vipNum", res.data.data.vipNum)
								uni.setStorageSync("vipTime", res.data.data.vipTime)
								uni.setStorageSync("productNum", res.data.data.productNum)
								uni.setStorageSync("fansNum", res.data.data.fansNum)
								uni.setStorageSync("commetNum", res.data.data.commetNum)
								uni.setStorageSync("loveNum", res.data.data.loveNum)
								uni.setStorageSync("info", res.data.info)

								console.log("openurl", that.openUrl)
								if (that.openUrl) {
									uni.navigateTo({
										url: that.openUrl
									})
								} else {
									uni.switchTab({
										url: "/pages/Mine/Mine"
									})

								}


							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.message
								})
							}

						}
					});
				} else {
					const url = getApp().globalData.apiUrl + "/api/v1/user/login/phone";
					uni.request({
						url: url,
						data: {
							code: this.code,
							phone: this.name
						},
						method: 'POST',
						success: (res) => {
							if (res.data.code == 0) {
								uni.setStorageSync("token", res.data.data.token)
								uni.setStorageSync("name", res.data.data.name)
								uni.setStorageSync("avator", res.data.data.avator)
								uni.setStorageSync("level", res.data.data.level)
								uni.setStorageSync("vipName", res.data.data.vipName)
								uni.setStorageSync("vipNum", res.data.data.vipNum)
								uni.setStorageSync("vipTime", res.data.data.vipTime)
								uni.setStorageSync("productNum", res.data.data.productNum)
								uni.setStorageSync("fansNum", res.data.data.fansNum)
								uni.setStorageSync("commetNum", res.data.data.commetNum)
								uni.setStorageSync("loveNum", res.data.data.loveNum)
								uni.setStorageSync("info", res.data.info)

								console.log("openurl", that.openUrl)
								if (that.openUrl) {
									uni.navigateTo({
										url: that.openUrl
									})
								} else {
									uni.switchTab({
										url: "/pages/Mine/Mine"
									})

								}


							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.message
								})
							}

						}
					});

				}

			}
		}
	}
</script>

<style>
	@import url("../../common/uni.css");

	.register {
		margin-bottom: 15rpx;
		width: 100%;
		margin-top: 80rpx;
	}

	.bg-gray-circle {
		background: #F7F7F7;
		border-radius: 50rpx;
	}

	button[type=primary] {
		background-color: #282828;
	}

	.bigMarginTop {
		margin-top: 80rpx;
	}

	.bigText {
		font-size: 48px;
		font-weight: normal;
		line-height: 64px;
		text-align: center;
		letter-spacing: 0px;
		color: #000000;
	}

	.bg {
		min-height: 100vh;
		background-color: #FFFFFF;
	}
</style>